<template>
  <Layout @initData="handleInitData">
    <SliderContent
      :slider-title="$t('ProductCategories')"
      :content-nav="'> ' + $t('ContactUs')"
      :hideSlider="true"
    >
      <template #content>
        <div class="info">
          <div class="info-item">
            <div class="label">{{ $t("Contact") }}：</div>
            <div class="content">{{ sysset.name }}</div>
          </div>
          <div class="info-item">
            <div class="label">TEL：</div>
            <div class="content">{{ sysset.tel }}</div>
          </div>
          <!-- <div class="info-item">
            <div class="label">FAX：</div>
            <div class="content">11111</div>
          </div> -->
          <!-- <div class="info-item">
            <div class="label">E-mail：</div>
            <div class="content">11111</div>
          </div> -->
          <!-- <div class="info-item">
            <div class="label">QQ：</div>
            <div class="content">11111</div>
          </div> -->
          <div class="info-item">
            <div class="label">微信号：</div>
            <div class="content">{{ sysset.tel }}</div>
          </div>
          <div class="info-item">
            <div class="label">地址：</div>
            <div class="content">{{ sysset.address }}</div>
          </div>
          
        </div>
      </template>
    </SliderContent>
  </Layout>
</template>

<script setup>
import Layout from "@/components/Layout.vue";
import SliderContent from "@/components/SliderContent.vue";
import { ref } from "vue";
const sysset = ref({});
const handleInitData = (data) => {
  sysset.value = data.sysset;
};
</script>

<style lang="less">
.info {
  .info-item {
    display: flex;
    color: #1a1a1a;
    font-size: 8px;
    margin-bottom: 10px;
  }

  .label {
    width: 40px;
    color: #767676;
  }
}
</style>
